<template>
  <div class="tabs box-shadow">
    <van-tabs @click="switchChannel">
      <van-tab
        v-for="(item, index) in channelList"
        :key="item.id"
        :title="item.name"
        :name="item.id"
      >
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
import { mapState } from 'vuex';
export default {
  data() {
    return {};
  },

  props: {
    channelList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  
  computed: {
    ...mapState(['channel', 'channels'])
  },
 
  methods: {
    switchChannel(name) {
      if (this.channels.indexOf(name) == -1) {
        this.$store.commit('SET_CHANNEL', name);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.tabs {
  width: 100%;
  position: fixed;
  top: 88px;
  height: 100px;
  z-index: 999;
  background-color: #fff;
  padding-left: 14px;
  & /deep/ .van-tabs,
  .van-tabs__wrap {
    background-color: #fff;
    border: none;
  }
  & /deep/ .van-tabs--line .van-tabs__wrap {
    background-color: #fff;
    border: none;
  }
  & /deep/ .van-tabs__wrap--scrollable .van-tab {
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    padding: 0 16px;
    border: none;
  }
  & /deep/ [class*='van-hairline']::after {
    border: 0 solid #fff;
  }
  & /deep/.van-tabs__line {
    width: 48px !important;
    height: 8px;
    border-radius: 4px;
    background: rgba(250, 70, 70, 1);
  }

  & /deep/ .van-tab {
    color: rgba(12, 12, 28, 0.7);
    font-size: 28px;
  }
  & /deep/ .van-tab--active span {
    font-size: 32px;
    color: rgba(12, 12, 28, 1);
    font-weight: 700 !important;
  }
}
</style>
